<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <title>Feng Ming Homepage</title>
    <link href="./lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="./lib/html5shiv/html5shiv.min.js"></script>
    <script src="./lib/respond/respond.min.js"></script>
    <![endif]-->
    <!--TODO 自己项目的文件-->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="less/index.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <style>
        /*响应式容器*/
        .container {

        }
    </style>
</head>
<body>
<!--TODO 自己项目页面内容-->

<!--网站导航sitenav-Begain-->
<!--网站导航sitenav-End-->

<!--主导航nav-Begain-->
<nav class="navbar navbar-default fm-nav ">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">


            </a>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
            <div class='ribbon '>
                <a href='#' id="home"><span>Home</span></a>
                <a href='#' onclick="$('#about').animatescroll()"><span>About Me</span></a>
                <a href='#' onclick="$('#skill').animatescroll()"><span>Skills</span></a>
                <a href='#' onclick="$('#interest').animatescroll()"><span>Interest</span></a>
            </div>
        </div><!-- /.navbar-collapse -->
        <div class="toTop hidden-md">
            <a href="#" onclick="$('#home').animatescroll()"></a>
        </div>
    </div><!-- /.container-fluid -->
</nav>
<!--主导航nav-End-->

<!--轮播图banner-Begain-->
<header class="fm-header">
    <div class="container">
        <div class="fm-name">
            <span class="letter" data-letter="F">F</span>
            <span class="letter" data-letter="E">E</span>
            <span class="letter" data-letter="N">N</span>
            <span class="letter" data-letter="G">G-</span>
            <span class="letter" data-letter="M">M</span>
        </div>
        <p class="fm-info ">
            <span class="line1 hidden-xs"></span>
            A creative and interactive web designer
            <span class="line2 hidden-xs"></span>
        </p>
    </div>
    <div class="fm-image ">
        <img src="./images/fm1.png" >
    </div>
</header>

<!--轮播图banner-End-->

<!--内容container-Begain-->
<div class="about" id="about">
    <div class="container">
        <div class="about-info drop-shadow">
            <h3>About Me</h3>
            <h4 class="">Who I am and self introduction</h4>
            <p> My name is fengming and I am 26 years old , come from hubei Provience .
                I was graduated in Wuhan Institute of Technology in 2012 ,My major is Process Equipment and Control Engineering , At the same time I heve learned a second degree,Engineering Management.
                I am a very good person to learn , the keowledge I have learned in college and the 4 years working experience lead me to a person with strong responsiblity and high working efficency.
                Since 2014 , I started working on aspects of the Internet , and I have a web site on-line.
                Now I'm interested in web delelop , and I learned a lot of knowledge in this area by myself , I believe I can do any work in this area;</p>
        </div>
        <div class="about-grids">
            <div class="col-md-6 about-grid">
                <h4>What I do and my experience</h4>
                <p>Depending on the product design requirements, and product interface and features, maintenance and performance optimization of the front page;
                    Resolve most major browsers compatibility issues, we put forward the best front-end technology solutions, with the completion of the product SEO optimization.
                </p>
            </div>
            <div class="col-md-6 about-grid">
                <h4>My Skills</h4>
                <p>
                    Learn ajax operation mechanism, master jsonp resolve cross-border issues and other methods;
                    Proficient bootstrap, angularJs other front-end common framework;
                    Master Html5, CSS3 new features and understanding canvas animation;
                </p>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
</div>
<!--内容container-End-->

<!--页面主体main-Begain-->
<div class="skills" id="skill">
    <div class="container">
        <div class="skills-info">
            <h3>
                Skills
                <span class="dance hidden-xs"></span>
            </h3>
            <div class="study2">
                <h4>Html</h4>
                <div class="progress">
                    <div class="progress-bar progress-bar-success active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
                        <span class="sr-only">40% Complete (success)</span>
                    </div>
                </div>
                <h4>Css</h4>
                <div class="progress">
                    <div class="progress-bar progress-bar-info active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                        <span class="sr-only">20% Complete</span>
                    </div>
                </div>
                <h4>Js</h4>
                <div class="progress">
                    <div class="progress-bar progress-bar-warning active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
                        <span class="sr-only">60% Complete (warning)</span>
                    </div>
                </div>
                <h4>Node.js</h4><h4>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
                        <span class="sr-only">20% Complete (danger)</span>
                    </div>
                </div>
            </h4>
            </div>
        </div>
    </div>
</div>
<!--页面主体main-End-->

<!--侧栏sidebar-Begain-->
<div class="interest" id="interest">
    <div class="container">
        <div class="interest-info hidden-xs">
            <h3>Interest</h3>
            <h4>My Photography</h4>
            <div class="foucebox" >
                <div class="bd">
                    <ul>
                        <li><a href="javascript:void(0)"><img  src="images/pic1.png"></a></li>
                        <li><a href="javascript:void(0)"><img  src="images/pic2.png"></a></li>
                        <li><a href="javascript:void(0)"><img  src="images/pic3.png"></a></li>
                        <li><a href="javascript:void(0)"><img  src="images/pic4.png"></a></li>
                        <li><a href="javascript:void(0)"><img  src="images/pic5.png"></a></li>
                    </ul>
                </div>
                <div class="hd">
                    <div  class="hoverBg" ></div>
                    <ul>
                        <li><a href="javascript:void(0)"><img  src="images/pic1.png"></a></li>
                        <li><a href="javascript:void(0)"><img  src="images/pic2.png"></a></li>
                        <li><a href="javascript:void(0)"><img  src="images/pic3.png"></a></li>
                        <li><a href="javascript:void(0)"><img  src="images/pic4.png"></a></li>
                        <li><a href="javascript:void(0)"><img  src="images/pic5.png"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="page-wrap" style="margin-top: 100px" class="hidden-md" >
            <div class="info-col">
                <h2>Superman</h2>
                <a class="image superman" href="javascript:void(0)">View Image</a>
                <dl>
                    <dt>Super Power</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Costume</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Morality</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Sidekicks</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Vehicles</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Weaknesses</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                </dl>
            </div>
            <div class="info-col">
                <h2>Batman</h2>
                <a class="image batman" href="javascript:void(0)">View Image</a>
                <dl>
                    <dt>Super Power</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Costume</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Morality</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Sidekicks</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Vehicles</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Weaknesses</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                </dl>
            </div>
            <div class="info-col">
                <h2>Aquaman</h2>
                <a class="image aquaman" href="javascript:void(0)">View Image</a>
                <dl>
                    <dt id="starter">Super Power</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Costume</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Morality</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Sidekicks</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Vehicles</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Weaknesses</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                </dl>
            </div>
            <div class="info-col">
                <h2>Spiderman</h2>
                <a class="image spiderman" href="javascript:void(0)">View Image</a>
                <dl>
                    <dt>Super Power</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Costume</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Morality</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Sidekicks</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Vehicles</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Weaknesses</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                </dl>
            </div>
            <div class="info-col">
                <h2>Ironman</h2>
                <a class="image ironman" href="javascript:void(0)">View Image</a>
                <dl>
                    <dt>Super Power</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Costume</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Morality</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Sidekicks</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Vehicles</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                    <dt>Weaknesses</dt>
                    <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</dd>
                </dl>
            </div>
        </div>
    </div>
</div>
<!--侧栏sidebar-End-->

<!--栏目column-Begain-->
<!--栏目column-End-->

<!--页尾footer-Begain-->
<!--页尾footer-End-->

<script src="./lib/jquery/jquery.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
<script src="./lib/SuperSlide/jquery.SuperSlide.2.1.1.js"></script>
<script src="./js/animatescroll.js"></script>
<script src="./js/index.js"></script>
<script>

</script>
</body>
</html>